<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue获取后端的动态数据(axios[封装了ajax])</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <!--实现前后端数据交互 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="addGoods">添加商品</el-button>
    <el-table :data="goodsList" stripe style="width: 100%">
        <el-table-column prop="goodsId" label="商品编号" width="180"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="goodsPrice" label="商品价格"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

    <!--弹出框-->
    <el-dialog v-model="dialogFormVisible" :title="goodsTitle" width="500">
        <el-form :model="goods">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="goods.goodsName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="goods.goodsPrice" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveGoods">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</div>

<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                goodsList: [],
                dialogFormVisible: false,
                goods:{},
                goodsTitle: '添加商品',
                total: 0,
                currentPage: 1,
                pageSize: 5
            }
        },
        methods: {
            getGoodsData() {
                axios.get('http://localhost:8080/goods/'+this.currentPage+'/'+this.pageSize)
                    .then((response) => {
                    this.goodsList = response.data.records;
                    this.total = response.data.total;
                    this.currentPage = response.data.current;
                    this.pageSize = response.data.size;
                })
            },
            addGoods(){
                //显示弹出框
                this.dialogFormVisible = true;
                this.goods = {}
                this.goodsTitle = '添加商品';
            },
            //点击编辑按钮
            handleEdit(row){
                this.dialogFormVisible = true;
                this.goods = row;
                this.goodsTitle = '编辑商品';
            },
            //点击删除按钮
            handleDelete(row){
                const goodsId = row.goodsId;
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('http://localhost:8080/goods/'+goodsId).then((response)=>{
                        if(response.data==='success'){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getGoodsData();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(newPageSize){
                this.pageSize = newPageSize;
                this.getGoodsData();
            },
            handleCurrentChange(newCurrentPage){
                this.currentPage = newCurrentPage;
                this.getGoodsData();
            },
            //保存或者更新商品
            saveGoods(){//实现提交商品表单
                if(this.goods.goodsId){
                    axios.put('http://localhost:8080/goods',this.goods).then((response)=>{
                        if(response.data==='success'){
                            this.dialogFormVisible = false;
                            this.getGoodsData();
                        }
                    })
                }else{
                    axios.post('http://localhost:8080/goods',this.goods).then((response)=>{
                        if(response.data==='success'){
                            this.dialogFormVisible = false;
                            this.getGoodsData();
                        }
                    })
                }
            }
        },
        mounted() { //在页面加载的过程中会调用该方法
            //执行获取后端商品数据的请求
            this.getGoodsData();
        }
    }).use(ElementPlus) //声明vue对象使用了elementUI的类库
        .mount("#app")
</script>
</body>
</html>